<template>
  <grid-layout :layout="layout">
    <template #left>
      <split-title text="基础信息" />
      <descriptions :columns="columns.slice(0, 4)" :data-source="yardDetails" :col-span="24" />
      <basic-map style="width: 100%; height: 240px">
        <template #default="scope">
          <map-position v-bind="scope" :lnglat="getPosition(yardDetails.coordinate)" />
        </template>
      </basic-map>
      <split-title text="其他信息" style="margin-top: 30px" />
      <descriptions :columns="columns.slice(4)" :data-source="yardDetails" :col-span="24" />
      <!--      <text-row-tight label="小区照片">
        <template v-if="yardDetails.yard_img">
          <div v-if="dataType.isString(yardDetails.yard_img)">
            <avatar-card :src="yardDetails.yard_img" />
          </div>
          <div v-if="dataType.isArray(yardDetails.yard_img)">
            <avatar-card v-for="(item, index) of yardDetails.yard_img" :key="index" :src="item"></avatar-card>
          </div>
        </template>
      </text-row-tight>-->
    </template>
    <template #right>
      <yard-details-table :yard-details="yardDetails" :yard_id="yardDetails.yard_id" style="height: 100%" />
    </template>
  </grid-layout>
</template>

<script>
import * as dataType from '@gis/lib/utils/dataType.js';
import BasicMap from '@gis/lib/components/AMap/basic-popup-map.vue';
import MapPosition from '@gis/modules/components/gis-map/map-position.vue';
import YardDetailsTable from './yard-details-table.vue';
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import AvatarCard from '@gis/lib/components/img-viewer/avatar-card.vue';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';

import { useDicDataStore } from '@gis/lib/pinia/dicData.js';

export default {
  name: 'yard-details',
  components: {
    SplitTitle,
    AvatarCard,
    GridLayout,
    YardDetailsTable,
    MapPosition,
    BasicMap,
  },
  props: {
    data: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      dataType,
      yardDetails: {},
      layout: [
        { name: 'left', colSpan: 6, style: { padding: '20px' } },
        { name: 'right', colSpan: 18 },
      ],
      columns: [
        { label: '名称', key: 'yard_name' },
        { label: '标准地址', key: 'yard_address' },
        { label: '所属网格', key: 'area_name' },
        { label: '坐标', key: 'coordinate' },
        { label: '建造年份', key: 'year_of_build' },
        { label: '交付年份', key: 'delivery_date' },
        { label: '房屋类型', key: 'yard_type', format: (v) => this.houseType[v] },
        { label: '房屋政策属性', key: 'housing_policy_property', format: (v) => this.housePolicy[v] },
        { label: '管辖派出所', key: 'police_station' },
        { label: '管辖民警', key: 'police_name' },
        { label: '管辖网格员', key: 'grid_member' },
      ],
    };
  },
  setup() {
    const { getDicData } = useDicDataStore();
    return { getDicData };
  },
  created() {
    this.getDataAsync();
  },
  computed: {
    housePolicy() {
      return this.getDicData('D0058');
    },
    houseType() {
      return this.getDicData('D0045');
    },
  },
  methods: {
    getPosition(v) {
      return v ? v.split(',') : [];
    },
    async getDataAsync() {
      const params = { yard_id: this.data.yard_id };
      const { data = {} } = await this.$axios.get('/xw-microservice/xw-actual-data/v3/house/yard/detail', {
        params,
      });
      this.yardDetails = data.yardDetails || {};
    },
  },
};
</script>

<style scoped lang="less">
.grid-layout {
  /deep/ .ant-row-flex {
    .ant-col:last-child {
      > div {
        padding: 0;
      }
    }
  }
}
</style>
